<template>
    <el-drawer ref="drawRef" v-model="dialogVisible" :destroy-on-close="true" :with-header="false" 
        :size="isMobile ? '100%' : 570">
        <div class="flex flex-jc-sb border-bottom pd-b-10 mg-b-20">
            <div class="fs-16 bold">{{ insureName }}批量设置方案保单号</div>
            <el-icon class="pointer" @click="handleDrawerClose">
                <CloseBold />
            </el-icon>
        </div>
        <div class="w-full box-border p-16px">
            <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" class="">
                <div class="header mg-b-20">
                    基础信息
                </div>
                <div class="grid">
                    <el-form-item v-for="(i, index) in formData.basicInfo" :key="index" :label="i.label" :prop="`basicInfo.${i.prop}.value`">
                        <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                            :placeholder="i.placeholder" :disabled="i.disabled" />
                        <el-date-picker v-if="i.type === 'date'" v-model="i.value" :type="i.dateType"
                            :placeholder="i.placeholder" :value-format="i.valueFormat || 'YYYY-MM'" class="w-full reset-full" />
                    </el-form-item>
                </div>
                <div v-if="canShow(formData.planA)" class="header mg-b-20">
                    灵活保单方案
                </div>
                <div v-if="canShow(formData.planA)" class="grid">
                    <el-form-item v-for="(i, index) in formData.planA" :key="index" :label="i.label" :prop="`${i.prop}.value`">
                        <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                            :placeholder="i.placeholder" />
                    </el-form-item>
                </div>
                <div v-if="canShow(formData.planB)" class="header mg-b-20">
                    月保单方案
                </div>
                <div v-if="canShow(formData.planB)" class="grid">
                    <el-form-item v-for="(i, index) in formData.planB" :key="index" :label="i.label" :prop="`${i.prop}.value`">
                        <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                            :placeholder="i.placeholder" />
                    </el-form-item>
                </div>
                <div v-if="canShow(formData.planC)" class="header mg-b-20">
                    即时生效保单方案
                </div>
                <div v-if="canShow(formData.planC)" class="grid">
                    <el-form-item v-for="(i, index) in formData.planC" :key="index" :label="i.label" :prop="`${i.prop}.value`">
                        <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                            :placeholder="i.placeholder" />
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="flex flex-jc-c">
            <el-button type="primary" @click="submit">确定</el-button>
        </div>
    </el-drawer>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { getDchemeList, addPolicy } from 'api/insure/longTerm.ts'
const isMobile = ref(window.isMobile)

const drawRef = ref(null)

const formRef = ref(null)

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    code: {
        type: [Number, String]
    },
    insureName: {
        type: String
    }
})

const emits = defineEmits(['update:show', 'success'])

const dialogVisible = ref(false)


const formData = ref({
    basicInfo: {
        insurCompany: {
            label: '保司编码',
            prop: 'insurCompany',
            disabled: true,
            type: 'input',
            placeholder: '请输入',
            inputType: 'text',
            value: '',
            disabled: true
        },
        yearMonth: {
            label: '生效年月',
            prop: 'yearMonth',
            disabled: true,
            type: 'date',
            placeholder: '请输入',
            dateType: 'month',
            value: ''
        },
    },
    planA: {},
    planB: {},
    planC: {}
})

const rules = ref({
    'basicInfo.yearMonth.value': [
        {
            required: true,
            trigger: 'change',
            message: '生效年月不能为空'
        }
    ],
})

const canShow = computed(() => {
    return (obj) => {
        return Object.keys(obj).length
    }
})

const handleDrawerClose = () => {
    drawRef.value.close()
}

const getList = () => {
    getDchemeList({
        code: props.code,
        pageNum: 1,
        pageSize: 100
    }).then(res => {
        const list = res.rows || []
        // 灵活保
        const listA = list.filter(i => i.solutionType === 21)
        // 月保
        const listB = list.filter(i => i.solutionType === 22)
        // 及时生效
        const listC = list.filter(i => i.solutionType === 23)

        formData.value.planA = createData(listA, '灵活方案')
        formData.value.planB = createData(listB, '月保单方案')
        formData.value.planC = createData(listC, '及时生效')
    })
}

const createData = (list, typeName) => {
    if (!list || !list.length) return {}
    const data = {}
    list.forEach(i => {
        data[i.solutionCode] = {
            label: `${i.solutionName}${typeName}`,
            solutionName: i.solutionName,
            prop: i.solutionCode,
            type: 'input',
            placeholder: '请输入',
            inputType: 'text',
            value: ''
        }
    })
    return data
}

const submit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            // handleAddAccount()
            // createQuery()
            handleAddPolicy()
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const createPolicyNos = (obj) => {
    const res = []
    const list = Object.values(obj).filter(i => i.value)
    list.forEach(i => {
        res.push(`${i.prop}///${i.value}///${i.solutionName}`)
    })
    return res
}

const createQuery = () => {
    const data = {
        type: 1,
        insureCompanyType: formData.value.basicInfo.insurCompany.value,
        yearMonth: formData.value.basicInfo.yearMonth.value,
        policyNos: [
            ...createPolicyNos(formData.value.planA),
            ...createPolicyNos(formData.value.planB),
            ...createPolicyNos(formData.value.planC),
        ]
    }
    return data
}

const handleAddPolicy = () => {
    addPolicy(createQuery()).then(res => {
        ElMessage.success({
            message: '新增成功'
        })
        dialogVisible.value = false
        emits('success')
    })
}

watch(() => props.code, (newval) => {
    if (newval) {
        formData.value.basicInfo.insurCompany.value = newval
    }
}, {
    immediate: true
})

watch(() => props.show, (newval) => {
    dialogVisible.value = newval
    if (newval) {
        getList()
    }
})

watch(dialogVisible, (newval) => {
    emits('update:show', newval)
    if (!newval) {
        formRef.value.resetFields()
    }
})
</script>
<style lang="scss" scoped>
.header {
    &::before {
        content: '';
        border-left: 4px solid #0256FF;
        height: 14px;
        margin-right: 5px;
    }
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px;
}

:deep(.reset .el-input__wrapper) {
    display: flex;
}
</style>